<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Document</title>

    <style>
        #bg {
            width:1000px;
            height: 20px;
            background: #ccc;
            position: relative;
        }
        #bg .start {
            width: 10px;
            height: 20px;
            background: #2ecc71;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        #bg .end {
            width: 10px;
            height: 20px;
            background: #9f191f;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        #bg .progress {
            width: 0;
            height: 100%;
            background: #5d59a6;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }
        .timeline {
            width: 100%;
            height: 50px;
            border-top: 1px solid #ccc;
            position: relative;
        }

        .ticks {
            position: absolute;
            top: 0;
        }

        .tick {
            position: absolute;
            top: 20px;
            height: 100%;
            font-size: 12px;
            text-align: center;
        }

        /* Style the tick labels */
        .tick:before {
            content: attr(data-label);
            position: absolute;
            left: -10px;
            top: 10px;
            width: 40px;
            text-align: left;
        }
        .tick:after {
            content: '';
            position: absolute;
            left: 50%; /* Adjust this to control the position of the label */
            width: 2px; /* Adjust this to control the width of the label */
            height: 10px;
            background: #0d0d0d;
        }

        .tick-z {
            position: absolute;
            top: 20px;
            height: 100%;
            font-size: 12px;
            text-align: center;
        }

        /* Style the tick labels */
        .tick-z:before {
            content: attr(data-label);
            position: absolute;
            left: -10px;
            top: 15px;
            width: 40px;
            text-align: left;
            color:red
        }
        .tick-z:after {
            content: '';
            position: absolute;
            left: 50%; /* Adjust this to control the position of the label */
            width: 2px; /* Adjust this to control the width of the label */
            height: 20px;
            background: #0d0d0d;
        }

        .qj {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="bg">
    <div class="start"></div>
    <div class="end"></div>
    <div class="progress"></div>
    <div class="timeline">
        <div class="ticks"></div>

    </div>
</div>
<div class="qj"></div>
</body>
</html>
<script>
    window.onload = function() {
        /**
         *
         * @param startTime 开始时间
         * @param endTime 结束时间
         * @param timeMinuteDiff 时间间隔 如：默认20分钟
         */
        function genTime(startTime, endTime, timeMinuteDiff = 20) {
            let bg = document.getElementById('bg');
            let start = document.querySelector('.start');
            let end = document.querySelector('.end');
            let progress = document.querySelector('.progress');
            let qj = document.querySelector('.qj');
            var endActive = false
            var endCurrentX;
            var startActive = false
            var startCurrentX;
            var tickLeft = 0;
            var diff = (endTime - startTime) * 60/ timeMinuteDiff;//计算显示多少个时间
            var diffLeft = parseInt(bg.offsetWidth/diff);//每个时间的left值
            var endTimeLeft = diff * diffLeft;
            var maxNode = 20;
            var showTimeDiff = Math.ceil(diff/maxNode);
            //创建时间线
            for (let i = 0; i <= diff; i++) {
                let tick = document.createElement('div');
                tick.className = 'tick';
                let minute = i*timeMinuteDiff;
                let tt = convertMinutesToHours(minute, startTime)
                if (diff > maxNode) {
                    if (i % showTimeDiff === 0) {
                        tick.setAttribute('data-label', tt[0]);
                        tick.className = 'tick-z';
                    }else {
                        tick.setAttribute('data-label', '');
                    }
                }else {
                    tick.setAttribute('data-label', tt[0]);
                }
                tick.style.left = tickLeft + 'px';
                tickLeft += diffLeft;
                document.querySelector('.ticks').appendChild(tick);
            }

            end.addEventListener('mousedown', function (e) {
                endActive = true
                endCurrentX = e.clientX - end.offsetLeft;
            })
            start.addEventListener('mousedown', function (e) {
                startActive = true
                startCurrentX = e.clientX - start.offsetLeft;
            })
            document.addEventListener('mouseup', function (e) {
                endActive = false
                startActive = false
                // console.log(parseInt(end.offsetLeft/diffLeft))
            })
            document.addEventListener('mousemove', function (e) {
                if (endActive) {
                    startActive = false
                    let moveLeft = e.clientX - endCurrentX
                    let realLeft = (parseInt(moveLeft/diffLeft) + 1) * diffLeft
                    end.style.left = realLeft + 'px';
                    progress.style.width = realLeft - start.offsetLeft + 'px';
                    if (end.offsetLeft < start.offsetLeft) {
                        end.style.left = start.offsetLeft + 'px';
                        progress.style.width = 0;
                    }
                    if (end.offsetLeft > endTimeLeft) {
                        end.style.left = endTimeLeft + 'px';
                        progress.style.width = endTimeLeft - start.offsetLeft + 'px';
                    }
                }
                if (startActive) {
                    endActive = false
                    let moveLeft = e.clientX - startCurrentX
                    let realLeft = (parseInt(moveLeft/diffLeft)) * diffLeft
                    start.style.left = realLeft + 'px';
                    progress.style.left = realLeft + 'px';
                    progress.style.width = (end.offsetLeft - realLeft) + 'px';
                    if (start.offsetLeft > end.offsetLeft || start.offsetLeft < 0) {
                        start.style.left = end.offsetLeft + 'px';
                        progress.style.left = start.offsetLeft + 'px';
                        progress.style.width = 0;
                    }
                }
                if (startActive || endActive) {
                    let textStart = convertMinutesToHours(parseInt(start.offsetLeft/diffLeft) * timeMinuteDiff, startTime)[0]
                    let textEnd = convertMinutesToHours(parseInt(end.offsetLeft/diffLeft)  * timeMinuteDiff, startTime)[0]
                    qj.textContent = textStart + ' ~ ' + textEnd
                }
            })
        }
        function convertMinutesToHours(minute, startTime) {
            var minutes = minute + startTime * 60
            var hours = Math.floor(minutes / 60);
            var remainingMinutes = minutes % 60;
            if (remainingMinutes < 10) {
                remainingMinutes = "0" + remainingMinutes;
            }
            return [hours + "::" + remainingMinutes, remainingMinutes === '00'];
        }
        
        genTime(8, 18, 3)
    }
</script>
